<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { extractDateTimeArr } from "@/utils";
import { userAnalysis } from "@/api/charts";

const intervalTypeDays = {
  1: 367,
  0: 30,
  // 2: 1,
};

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },

    type: {
      type: String,
      default: "month",
    },
  },
  data() {
    return {
      chart: null,
      xAxisData: [],
      chartsData: {
        cancelNum: [],
        notReachNum: [],
        passNum: [],
        waitAuditNum: [],
      },
    };
  },
  computed: {
    typeDateRange() {
      const now = new Date();
      const endArr = extractDateTimeArr(now);
      const createEnd = endArr.slice(0, 3).join("-");
      const interval = intervalTypeDays[this.type];

      const startArr = extractDateTimeArr(
        new Date(now.setDate(now.getDate() - interval))
      );
      const createStart = startArr.slice(0, 3).join("-");
      return [createStart, createEnd];
    },
  },
  watch: {
    type: {
      async handler() {
        this.$nextTick(() => {
          this.initChart();
        });
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    async getChartsData() {
      const [createAt, createEnd] = this.typeDateRange;
      const { data } = await userAnalysis({
        type: this.type,
        createAt,
        createEnd,
      });

      const xAxisData = [];
      const chartsData = {
        companyUserNum: [],
        demandUserNum: [],
        merchantUserNum: [],
      };
      Object.entries(data).forEach(([date, _data]) => {
        xAxisData.push(date);
        Object.entries(_data).forEach(([key, value]) => {
          chartsData[key].push(value);
        });
      });
      this.xAxisData = xAxisData;
      this.chartsData = chartsData;
    },
    async initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      await this.getChartsData();
      this.setOptions(this.chartsData);
    },
    setOptions({ companyUserNum, demandUserNum, merchantUserNum } = {}) {
      this.chart.setOption({
        color: ["#40c9c6", "#f4516c", "#d87416"],
        xAxis: {
          data: this.xAxisData,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
        },
        legend: {
          data: ["企业用户数", "需求用户数", "商户数"],
        },
        series: [
          {
            name: "企业用户数",

            type: "line",
            data: companyUserNum,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: "需求用户数",

            type: "line",

            data: demandUserNum,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
          {
            name: "商户数",

            type: "line",

            data: merchantUserNum,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
        ],
      });
    },
  },
};
</script>

<style>
.a{
  color: #d87416
}
</style>